<!DOCTYPE html>
<!--
这里是注释
-->
<!--   这是注释
-->
<!--html文件  需要 分成2部分
head和body
语法1: 所有的东西 都是 标签
标签: 1. <标签名 属性1="属性值" 属性2="属性值"... />
      2. <标签名 属性1="属性值" 属性2="属性值">
                这里可放其他内容
       </标签名>
-->
<html lang="en">
<head>
    <!--head里的内容 都不会显示在浏览器中
    是设置这个页面的一些基本属性用的-->
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_544187_556fkna1ddtsatt9.css">
</head>
<body>
<!-- 这里的 内容 全部会显示在浏览器当中
所有在 body中写的内容 都会 按顺序 写在页面中,并不会换行
因为 我们没有告诉浏览器 要换行
所有的空格,换行 都会被浏览器渲染成一个空格-->
HelloHTML
<!--br  换行标签 单标签 ,可以省略 / -->
<i class="iconfont icon-30"></i>
<br/>
这是第二行<br>这是第三行
<!--hr 分割线 也是单标签 可以不写-->
<hr>

<!--双标签 文本相关-->
<!--h标签 用来表示标题,它会被浏览器渲染成指定的格式
html规定 标题最多到6级,再往后就没有了,也就没有格式了
标题标签 需要在 标签体中, 包裹 文本内容,使之成为标题
并且会 独立成行-->
<h1 id="sd">一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<h7>7级标题</h7>
<h100>100级标题</h100>
<hr>
<!--p标签 是段落标签, 每一个自然段 用p标签包裹,
这是我们 非常常用的标签
p标签只能 成段, 独立换行,不能 保留内部格式-->
<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3, 段落3
    很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
<hr>

<h1>静夜思</h1>
<p>床前明月光,</p>
<p> 疑是地上霜.</p>
<p> 举头望明月,</p>
<p> 低头思故乡.</p>

<hr>
<h1>咏鹅</h1>
<!--pre 标签 作用和 p标签类似,只不过 可以保留内部的格式-->
<pre>鹅          鹅 鹅</pre>
<pre>   曲项向天歌</pre>
<pre>       白毛浮绿水</pre>
<pre>           红掌拨清波</pre>
<hr>
<h1>悯农</h1>
<!--我们可以使用 font 标签 包裹若干文字,那么被包裹的文字,就有了
设置字体样式的能力,
字体颜色: 使用color属性,html 内置了一些颜色信息
如 red,yellow,.....可以直接使用这个颜色名
如果内置的这些颜色 都不能满足我们,那么我们可以使用
#6位16进制的数字 来表示一个颜色
#是必写的,
如果 rgb 三种颜色分量 的 2个数位 数字是一样的
形如 ff6677  AA8822 这种的
也可以用3位表示 即 #F67  #A82-->
<p><font size="7">锄</font>禾<font color="red">日</font>当午</p>
<p><font color="#ff8888">汗滴</font>禾下土</p>
<p>谁知盘中餐</p>
<p>粒粒皆辛苦</p>

<hr>
<!-- 使用 font 设置字体大小 只有档位,没有具体的大小
范围1-7 超出范围 按照 边界条件
即 8以上 就按照7的大小,并且数字越大,字号越大-->
<p><font size="0">0</font></p>
<p><font size="1">1</font></p>
<p><font size="2">2</font></p>
<p><font size="3">3</font></p>
<p><font size="4">4</font></p>
<p><font size="5">5</font></p>
<p><font size="6">6</font></p>
<p><font size="7">7</font></p>
<p><font size="8">8</font></p>

<!--可以使用 face属性来设置字体,但是 具体显示的是
什么字体,跟浏览器,跟操作系统 都没有关系
所以 在网页中,很少回去改字体,而之后我们会学习
通过字体文件来显示图片-->
<p><font face="手札体">这是一行文字</font></p>
<p>这是一行文字</p>
<p><font face="隶书">这是一行文字</font></p>

<hr>
<p>
    <!--
    <strong> : 标签可以用来加粗
    <em>    : 斜体 ,也可以使用<i>
    <del>   : 删除线,也可以使用<s>
    <ins>   : 下划线,也可以使用<u>

    <i>     : 设计这个标签的时候,是把它当做斜体来设计的
            但是随着没有文化的程序员越来越多,
            它被当做了 图标标签  专门用来显示一个图标(通过加载
            字体文件的方式) 被一厢情愿的认为是 icon的简写
    -->
    <i>怒发冲冠</i>，凭阑处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。
    三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切。
    靖康耻，犹未雪；<strong>臣子恨</strong>，<em>何时灭</em>？
    <del>驾长车</del>
    ，踏破贺兰山缺。
    <ins>壮志饥餐胡虏肉</ins>
    ，笑谈渴饮匈奴血。
    待从头，收拾旧山河，朝天阙。

</p>

<hr>
<!--图片标签
src 属性,指向的是图片的路径
如果直接以英文字母开头(MAC/LINUX)
那么表示的是相对路径,是相对于 当前的这个HTML页面
在相对路径中 .. 表示上一级文件夹
            . 表示 当前文件夹

路径 也可用 绝对路径,但是不要使用
即 在src这 放入你图片文件的 绝对路径

图片宽 : width
高:      height
改图片的尺寸,只是修改图片的显示尺寸,不会影响真实图片的大小
并且不能保证图片的比例

如果想要保证图片比例,只需要指定 宽/高中的 一个,另一个不要写
那么浏览器 就会 按照指定的大小 显示图片的 宽/高,没指定的 就会
按比例缩放

title 标题,鼠标放在图片上时 显示的文字
alt 当图片有错误,无法显示的时候,提示信息
-->
<img src="pikaqiu.jpg" height="100" title="皮卡丘"/>
<img src="imgs/a1a.jpg" height="100" alt="高清无码大图">
<img src="../imgs/bb.jpg" height="100">

<hr>
<!--音乐播放
使用src属性 指定音乐的位置
hidden属性指定 是否显示音乐播放的控件-->
<!--<embed src="姐姐.mp3" hidden="true">-->

<hr>
<!--列表-->
<!--有序列表-->
<ol type="i" start="9">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ccc</li>
    <li>ccc</li>
    <li>ccc</li>
</ol>
<!--无序列表-->
<ul type="disc">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>

    <ul type="circle">
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
    </ul>

</ul>

<hr>
<!--超链接
a标签表示超链接,可以点击去往不同的网页
href 是必填属性,表示要连接到的地址
文字需要放在a标签的内部

a 标签的target 默认属性是_self: 表示在当前页面打开
可以换成_blank,表示再打开一个新的标签页
还有2个属性,今晚查一下,名字提问
-->
<a target="_blank" href="http://www.baidu.com"
title="鼠标的提示">点击查看</a>
<!--跳转到自己的html页面 使用的是相对路径-->
<a target="_blank" href="2_HIHTML.html">自己的页面</a>
<!--回到 锚点-->
<a href="#">回到h1位置</a>
<br>
<br>
<br>
<br>
</body>
</html>